<template>
  <view class="list-money-list">
    <view class="list-money-row">
      <view 
        class="list-money-col" 
        v-for="item in products" 
        :key="item.id"
      >
        <view class="list-money-item">
          <image class="list-money-image" :src="item.image" mode="aspectFill" />
          <view class="list-money-title">{{ item.title }}</view>
          <view class="list-money-bottom">
            <view class="list-money-price">
              <text class="list-money-symbol">¥</text>
              <text class="list-money-value">{{ item.price }}</text>
            </view>
            <view class="list-money-button" @click="$emit('add-to-cart', item)">立即加购</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductGrid',
  props: {
    products: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  emits: ['add-to-cart']
}
</script>



<style lang="scss" scoped>
.list-money-list {
  padding: 12px;
  
  .list-money-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    
    .list-money-col {
      .list-money-item {
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        padding: 8px 8px 0;
        
        .list-money-image {
          width: 100%;
          height: 160px;
          background: #f5f5f5;
          border-radius: 8px;
        }
        
        .list-money-title {
          font-size: 14px;
          color: #333;
          line-height: 1.4;
          padding: 8px 2px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          min-height: 42px;
        }
        
        .list-money-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 2px 10px;
          
          .list-money-price {
            display: flex;
            align-items: baseline;
            color: #FF5B5B;
            
            .list-money-symbol {
              font-size: 12px;
              margin-right: 1px;
            }
            
            .list-money-value {
              font-size: 18px;
              font-weight: bold;
            }
          }
          
          .list-money-button {
            background: linear-gradient(to right, #FF8181, #FF5B5B);
            color: #fff;
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(255, 91, 91, 0.2);
          }
        }
      }
    }
  }
}
</style>
